<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<style type="text/css">
	/*
		父元素相对定位，子元素绝对定位，让所有的子元素，img标签放到同一个层面上去。
	*/
		.lunbo{width:540px;
			   height:290px;
			   position:relative;
			   border:1px solid black;
			   overflow:hidden;
			   }
		
		.lunbo img{position:absolute;display:none;}
		.lunbo .show{display:block;}
	
	</style>
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
	<div class="lunbo">
		<img class="show" src="images/ad1.jpg" alt="1" />
		<img src="images/ad2.jpg" alt="2" />
		<img src="images/ad3.jpg" alt="3" />
		<img src="images/ad4.jpg" alt="4" />
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
		
			
			var i=1;
			var stop;
			var stops;
			var leng=$('.lunbo').children('img').length
			function lunbo(){
			
				//当i等于图片个数的时候，变回0，在重新循环。
				if(i==leng){
					i=0;
				}
				
				$('.lunbo').children("img:eq("+i+")")
					   .fadeIn(5000).siblings().fadeOut(5000);
					   
				i++;
		
				stop=setTimeout(lunbo,6000);
			}
			
			lunbo();
			
			$('.lunbo').hover(function(){
					
							
							//清除定时器，避免有人不停的用鼠标移入移出。
							clearTimeout(stops);
							clearTimeout(stop);
							
							
						},function(){
						
							//鼠标移出的时候，等待三秒在执行轮播。并将定时器给一个变量
							stops=setTimeout(lunbo,3000);
						
						});
		});
		
	</script>
</body>
</html>